// 导航菜单公共组件

import { observer } from "mobx-react";
import "./index.less"
import { Menu, Breadcrumb } from 'antd';
import store from "./model"
import { history } from "umi";


function Index() {
    // 根据跳转设置菜单选中的key
    store.selectKey = [history.location.pathname]

    // 点击导航菜单
    function clickMenu(e) {
        store.selectKey = e.keyPath
        history.push(e.key)
        store.menuList.forEach((item) => {
            if (item.key === e.key) {
                store.breadcrumb[1].title = item.label
                store.breadcrumb[1].path = item.key
            }
        })
    }
    // 点击面包屑跳转对应页
    function clickBreadcrumb(item) {
        history.push(item.path)
    }

    return (
        <>
            <div className="menu">
                <div className="menu-head">
                    <div className="menu-head-left">
                        <Menu onClick={clickMenu} theme="dark" selectedKeys={store.selectKey} mode="horizontal" items={store.menuList} />
                    </div>
                    <div className="menu-head-right" onClick={() => {history.push("/")}}>
                        <img style={{width: "20px", height: "20px", marginRight: "3px"}} src={require("../../../assets/images/首页.png")}  alt="" />
                        <div>首页</div>
                    </div>
                </div>

                <div className="menu-breadcrumb">
                    <Breadcrumb>
                        {store.breadcrumb.map((item, i) => {
                            return (
                                <Breadcrumb.Item onClick={() => { clickBreadcrumb(item) }} key={i}>{item.title}</Breadcrumb.Item>
                            )
                        })}
                    </Breadcrumb>
                </div>
            </div>
        </>
    )
}

export default observer(Index)
